<template>
  <div class="GykjMap-otherBuild">
    <div class="GykjMap-otherBuild-table">
      <table border class="table">
        <tbody>
          <tr>
            <td class="bold">铁皮屋/工棚名称</td>
            <td>{{fliterData('名称')}}</td>
            <td class="bold">类型</td>
            <td colspan="2">{{fliterData('类型')}}</td>
          </tr>
          <tr>
            <td class="bold">定位信息</td>
            <td class="bold">经度</td>
            <td>{{fliterData('经度')}}</td>
            <td class="bold">纬度</td>
            <td>{{fliterData('纬度')}}</td>
          </tr>
        </tbody>
      </table>
      <h3 style="fontWeight:bold;textAlign:center;lineHeight:50px">
        一、铁皮屋/工棚基本情况
      </h3>
      <table border class="table">
        <tbody>
          <tr>
            <td class="bold">建筑地址</td>
            <td colspan="7">{{fliterData('建筑地址')}}</td>
          </tr>
          <tr>
            <td class="bold">建筑用途</td>
            <td colspan="4">{{fliterData('建筑用途')}}</td>
            <td class="bold" colspan="2">满负荷运行时的人数</td>
            <td>{{fliterData('满负荷运行人数')}}</td>
          </tr>
          <tr>
            <td class="bold">建筑层数（层）</td>
            <td>{{fliterData('建筑层数')}}</td>
            <td class="bold">投影面积</td>
            <td>{{fliterData('投影面积')}}</td>
            <td class="bold">长（m）</td>
            <td>{{fliterData('长')}}</td>
            <td class="bold">宽（m）</td>
            <td>{{fliterData('宽')}}</td>
          </tr>
          <tr>
            <td class="bold">建筑年份</td>
            <td>{{fliterData('建筑年份')}}</td>
            <td class="bold">使用年限</td>
            <td>{{fliterData('使用年限')}}</td>
            <td class="bold">俯视形状示意图</td>
            <td colspan="3">{{fliterData('俯视形状示意图')}}</td>
          </tr>
          <tr>
            <td class="bold">建筑结构形式</td>
            <td colspan="7">{{fliterData('建筑结构形式')}}</td>
          </tr>
          <tr>
            <td class="bold">经营机构</td>
            <td colspan="7">{{fliterData('经营机构')}}</td>
          </tr>
        </tbody>
      </table>
      <h3 style="fontWeight:bold;textAlign:center;lineHeight:50px">
        二、铁皮屋/工棚相关联系人防水
      </h3>
      <table border class="table">
        <tbody>
          <tr>
            <td class="bold">房屋所有者（产权所有人）</td>
            <td class="bold">法人代表姓名</td>
            <td>{{fliterData('房屋所有者法人代表姓名')}}</td>
            <td class="bold">手机号码</td>
            <td>{{fliterData('房屋所有者法人代表电话')}}</td>
          </tr>
          <tr>
            <td class="bold">房屋使用人（经营机构法人代表）</td>
            <td>法人代表姓名</td>
            <td class="bold">{{fliterData('房屋使用人法人代表姓名')}}</td>
            <td class="bold">手机号码</td>
            <td>{{fliterData('房屋使用人法人代表电话')}}</td>
          </tr>
          <tr>
            <td class="bold" rowspan="2">经营机构防灾与安全责任人</td>
            <td class="bold">姓名</td>
            <td>{{fliterData('经营机构防灾与安全责任人姓名1')}}</td>
            <td class="bold">手机号码</td>
            <td>{{fliterData('经营机构防灾与安全责任人电话1')}}</td>
          </tr>
          <tr>
            <td class="bold">姓名</td>
            <td>{{fliterData('经营机构防灾与安全责任人姓名2')}}</td>
            <td class="bold">手机号码</td>
            <td>{{fliterData('经营机构防灾与安全责任人电话2')}}</td>
          </tr>
        </tbody>
      </table>
      <h3 style="fontWeight:bold;textAlign:center;lineHeight:50px">
        三、村（居）委信息
      </h3>
      <table border class="table">
        <tbody>
          <tr>
            <td class="bold" colspan="2">村居委会名称</td>
            <td colspan="2">{{fliterData('村居委会名称')}}</td>
            <td class="bold">区域编码</td>
            <td>{{fliterData('区域编码')}}</td>
          </tr>
          <tr>
            <td class="bold" colspan="2">村居委会主任</td>
            <td colspan="2">{{fliterData('村居委主任姓名')}}</td>
            <td class="bold">手机号码</td>
            <td>{{fliterData('村居委主任电话')}}</td>
          </tr>
          <tr>
            <td class="bold" colspan="2">村居委会三防责任人</td>
            <td colspan="2">{{fliterData('村居委三防责任人姓名')}}</td>
            <td class="bold">手机号码</td>
            <td>{{fliterData('村居委三防责任人电话')}}</td>
          </tr>
          <tr>
            <td class="bold">填表人</td>
            <td>{{fliterData('填表人')}}</td>
            <td class="bold">联系电话</td>
            <td>{{fliterData('填表人联系电话')}}</td>
            <td class="bold">填表时间</td>
            <td>{{fliterData('填表时间')}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isInit: {
      type: Boolean,
      default: true
    }
  },
  mounted () {
    if (this.isInit) {
      this.initData()
    }
  },
  data () {
    return {
      resultData: {}
    }
  },
  methods: {
    fliterData (key) {
      if (this.resultData[key] === 0) {
        return this.resultData[key]
      }
      return this.resultData[key] || '--'
    },
    fliterDouData (key) {
      const arr = key.split('.')

      if (this.resultData[arr[0]] === undefined) {
        this.resultData[arr[0]] = {}
      }

      return this.resultData[arr[0]][arr[1]] || '--'
    },
    initData (data = {}) {
      this.resultData = data
    }
  }
}
</script>

<style lang="scss" scoped>
.GykjMap-otherBuild {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
  padding: 5px;
  .GykjMap-otherBuild-table {
    width: 100%;
    height: 100%;
    .table {
      width: 100%;
      font-size: 14px;
      border: 1px solid #ddd;
      td {
        padding: 5px;
      }
    }
  }
}
</style>
